<template>
  <!-- 课程特色 -->
  <section class="section_box2 container scroll" data-index="2" id="2">
    <span class="big_title flexcc">课程特色</span>
    <div class="content_box">
      <div class="swiper-slide flexjs">
        <div class="itme flexccc">
          <span class="ico_case"></span>
          <h3>专业</h3>
          <ul class="info">
            <li>15年智能制造行业教学经验沉淀</li>
            <li>近百位资深教师团队及专家顾问</li>
            <li>历时160天精心打造</li>
          </ul>
        </div>
        <div class="itme flexccc">
          <span class="ico_case num1"></span>
          <h3>全面</h3>
          <ul class="info">
            <li>涵盖市场主流应用设备</li>
            <li>从PLC、变频、人机、伺服、机器人各类单产品，到机台产线</li>
            <li>线下实战高效学习，线上理论课程辅导</li>
          </ul>
        </div>
        <div class="itme flexccc">
          <span class="ico_case num2"></span>
          <h3>实用</h3>
          <ul class="info">
            <li>一站成长式技能学习拒绝“纸上谈兵”</li>
            <li>专攻实际工作及项目场景</li>
            <li>应用技能，即学即用</li>
          </ul>
        </div>
        <div class="itme flexccc">
          <span class="ico_case num3"></span>
          <h3>可靠</h3>
          <ul class="info">
            <li>西门子官方授权，教育合作伙伴</li>
            <li>学习、辅导、考证一站完成</li>
            <li>考试通过即颁发官方证书</li>
            <li>学后支持在线答疑</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>
<script>

import "swiper/css/swiper.min.css";
export default {
  name: 'section-box2',
  data() {
    return {

    }
  },
  components: {
  },
  // 接受父组件的值
  props: ["dispimage"],
  mounted() {

  },
  methods: {
  },
  computed: {
  },
}
</script>

<style lang="scss">
@import "./../assets/scss/base.scss";
@import "./../assets/scss/mixin.scss";
.section_box2 {
  padding-bottom: 90px;

  .content_box {
    margin-top: 28px;

    .itme {
      padding: 12px;
      width: 286px;
      height: 282px;
      background: #ffffff;
      border: 1px solid #c7c9d9;
      box-sizing: border-box;
      box-shadow: 0px 2px 4px rgba(40, 41, 61, 0.04),
        0px 8px 16px rgba(96, 97, 112, 0.16);
      border-radius: 10px;
    }

    .ico_case {
      margin-top: 1rem;
      width: 100%;
      height: 90px;
      background: url(/imgs/icon_1.png) no-repeat center center;
      background-size: auto 100%;
    }

    .num1 {
      background: url(/imgs/icon_2.png) no-repeat center center;
      background-size: auto 61.09px;
    }

    .num2 {
      background: url(/imgs/icon_3.png) no-repeat center center;
      background-size: auto 68px;
    }

    .num3 {
      background: url(/imgs/icon_4.png) no-repeat center center;
      background-size: auto 64px;
    }

    h3 {
      white-space: nowrap;
      margin-top: 24.2px;
      margin-bottom: 12px;
      font-weight: 400;
      font-size: 24px;
      line-height: 32px;
      color: #28293d;
    }

    .info {
      width: 100%;
      min-height: 72px;

      li {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        color: #555770;
        text-align: left;
        list-style: inside;
        text-indent: -1.4em;
        margin-left: 1.4em;
      }
    }
  }
}
</style>